<template>
	<view class="myGroup">
		<view class="group" v-for=" (item,index) in tushu" >
				<image class="scriptIma" :src="'http://124.220.177.66:8082'+item.scriptUrl" mode="widthFix"></image>
				<view class="content">
					<!-- 文字 -->
					<view>
						<text>{{item.scriptName}}</text>
						<text>人数：{{item.peopleNum}}/{{item.peopleCount}}</text>
					</view>
						
					<!-- 类型小字描述 -->
					<!-- 差一个剧本类型字段 -->
					<view>
						<text>{{item.gameTime}}</text>
					</view>
						
					<!-- 参加按钮 -->
					<!-- 根据orderStatus写一个判断渲染按钮描述 -->
					<view>
						<image :src="'http://124.220.177.66:8082'+item.hostHeader" mode="widthFix"></image>
						<button disabled>
							<!-- -1已解散 1组局中 2已成局 3已结束 -->
							<text v-if="item.orderStatus == -1">已解散</text>
							<text v-if="item.orderStatus == 1">组局中</text>
							<text v-if="item.orderStatus == 2">已成局</text>
							<text v-if="item.orderStatus == 3">已结束</text>
						</button>
					</view>
						
					<!-- 时间 -->
					<view>
						<text>开始时间:{{item.startTime}}</text>
						<text>结束时间:{{item.endTime}}</text>
					</view>
					
				</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		name:"myGroup",
		props:['tushu','navbar'],
		data() {
			return {
				
			};
		},
		methods:{		
			//接收子组件数据
			getIndex(v){
				console.log(v);
			}
		},
	}
</script>

<style lang="scss">
@import url('~@/static/iconfont/iconfont.css');
.myGroup{
	.group{
		border-radius: 20rpx;
		background-color: #232433;
		padding: 20rpx;
		margin: 20rpx;
		
		display: flex;
		justify-content: space-between;
			
			.scriptIma{
				height: 250rpx;
				width: 200rpx;
				border-radius: 20rpx;
				margin-right: 15rpx;
			}
			.content{
				// border: 1rpx solid yellow;
				height: 250rpx;
				width: 500rpx;
				view:nth-of-type(1){
					text:nth-of-type(2){
						float: right;
					}
				}
				view:nth-of-type(2){
					text{
						font-size: 25rpx;
						color: #ccc;
					}
				}
				view:nth-of-type(3){
					// border: 1rpx solid red;
					height: 40rpx;
					margin: 40rpx auto 30rpx auto;
					image{
						width: 55rpx;
						height: 55rpx;
						// border: 1rpx solid red;
						border-radius: 50%;
					}
					button{
						width: 130rpx;
						height: 55rpx;
						line-height: 55rpx;
						float: right;
						background-color: #69348c;
						text{
							font-size: 25rpx;
						}
					}
				}
				view:nth-last-of-type(1){
					// border: 1rpx solid red;
					font-size: 20rpx;
					height: 50rpx;
					text:nth-of-type(2){
						display: block;
					}
				}
			}
}

}


</style>